import { Menu } from 'antd';
import React, {Component} from 'react';

import './header.css'
import { connect} from "react-redux"
const { SubMenu } = Menu;

class HeaderBar extends Component {
  state = {
    current: 'mail',
    
  };
  componentDidMount(){
	}
  handleClick = e => {
    this.props.setMenu(e.key)
    this.setState({
      current: e.key,
    });
  };
  // componentWillReceiveProps (){
  // }
  render() {
    const data = [
      {
        name: '菜单1',
        key: 'mail0',
        children: [
          {
            name: '子菜单1',
            key: 'menu1',
          },
          {
            name: '子菜单2',
            key: 'menu2',
          },
        ],
      },
      {
        name: '菜单2',
        key: 'menu3',
        children: [
          {
            name: '子菜单4',
            key: 'menu4',
          },
          {
            name: '子菜单4',
            key: 'menu5',
          },
          {
            name: '产品多维看板',
            key: 'menu7',
          },
        ],
      },
      {
        name: '菜单3',
        key: 'menu6',
      },
    ];
    const {userName} = this.props;
    return (
    
      <div className="topnav">
          <div className="name">app.admin</div>
          <div className="menubox">
            <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal"   >
              {data &&
                    data.map(item =>
                      item.children ? (
                        <SubMenu key={item.key} title={item.name} >
                          {item.children &&
                            item.children.map(child => (
                              <Menu.Item  key={child.key}>
                                {child.name}
                              </Menu.Item>
                            ))}
                        </SubMenu>
                      ) : (
                        <Menu.Item key={item.key} >
                          {item.name}
                        </Menu.Item>
                      )
                  )}
              </Menu>
          </div>
         
            <div className="userinfo">
              {userName}
            </div>
      </div>
    );
  }
}
const mapStateToProps = (state) =>{
  return {
		userName:state.user.userInfo.userName
	}
}
const mapDispatchToProps = (dispatch) =>{
  // 返回一个对象给组件，通过this.props获取
  return{
    setMenu: (data)=>{
      dispatch({type:'MENU_TYPE',menuType:data})
    }
  }
}

//  mapStateToProps  获取 redux 中的值
//mapDispatchToProps 触发 dispatch 中 action  action.type为MENU_TYPE
export default connect(mapStateToProps,mapDispatchToProps)(HeaderBar);